<!-- 横条目录 -->
<template>
	<view class="pug-chapter-tabbox">
		<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="cindex>1?120*cindex:0" 
			@scrolltolower="loadMore">
			<view  class="scroll-view-item_H" @click="handleClick(item,index)" v-for="(item,index) in dataList">
				<view class="scroll-itembox"
				 :class="[(cindex==index)?'active':'']">
					<view class="stit">{{item.index}}、{{item.title}}</view>
					<view class="s-cnt">
						<text class="stime">{{item.coursetimer}}</text>
					</view>	
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"pug-chapter-tabbar",
		props:{
			dataList:{
				type:Array,
				default:[]
			},
			chapterindex: {
				type: [String,Number],
				default: 0
			},
			lessonindex: {
				type: [String,Number],
				default: 0
			},
			cindex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentIndex:0
			}
		},
		methods:{
			handleClick(item,index){
				this.currentIndex = index;
				// 解构章节索引
				const {chapterIndex,lessonIndex} = item;
				// 传递给父组件
				this.$emit("change",{chapterIndex,lessonIndex,currentIndex:this.currentIndex});
			},
			loadMore(){
				console.log("加载下一页数据了")
			}
		}
	}
</script>

<style lang="scss">
.pug-chapter-tabbox{
	padding: 20rpx;	
}		
.scroll-view_H {
	/*元素不换行,横向滚动条原理*/
	white-space: nowrap;
	width:100%;
}
.scroll-view-item {
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}
.scroll-view-item_H {
	display: inline-block;
	width: calc(33% - 50rpx);
	height: 102rpx;
	margin-right: 20rpx;
	font-size:22rpx;
	padding:20rpx;
	background:#fafafa;
	border-radius: 6rpx;
	&:last-child{
		margin-right: 0;
	}
	.scroll-itembox{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		.stit{
			white-space: normal;
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:2;
		}
		.s-cnt{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
		&.active{
			font-weight: bold;
		}
		&.active .s-cnt:after{
			content: "";
			display: inline-block;
			background-image: url("@/static/images/loading.gif");
			width: 28px;
			height: 20px;
			transform: scale(0.5);
			position: absolute;
			right: 0rpx;
			bottom: -7rpx;
		}
		.stime{
			font-size:20rpx;
		}
	}
}
</style>